<template>
  <div class="shopcar">
    <ul>
  		<li v-for="item in shopcar" :key="item.id">
  			<img :src="item.src" >
  			<div>
  				<p>{{item.title}}</p>
  				<p>¥{{item.price}}</p>
  				<p><button @click="del(item)">删除</button></p>
  			</div>
  		</li>
  	</ul>
	<p v-if="shopcar.length">总价:{{totalPrice}}</p>
	<p v-else>购物车暂无商品</p>
  </div>
</template>
<script>
import {mapState,mapGetters} from 'vuex'
export default{
	name:'ShopCar',
	//vuex提供了mapState辅助函数，可以简化computed计算属性的写法
	//方法1
	// computed:{
	// 	shopcar(){
	// 		return this.$store.state.shopcar
	// 	},
	// 	totalPrice(){
	// 		return this.$store.getters.totalPrice
	// 	}
	// 	}
	
	//方法2
	computed:{
		...mapState(['shopcar']),
		...mapGetters(['totalPrice'])
	},
	methods:{
		del(item){
			this.$store.commit('del',item);
		}
	}
	}
</script>
<style scoped>
	.shopcar{
		width: 100%;
		padding-bottom:50px;
	}
	
	li{
		position: relative;
		border-bottom:1px dashed #ccc ;
		padding: 5px;
	}
	div{
		display: inline-block;
		position: absolute;
		top: 10px;
		width: 120px;
		line-height: 30px;
		font-size: 14px;
	}
	img{
		width: 100px;
		border: 1px solid #ccc;
		margin: 10px 10px 0px 10px;
	}
	div p:nth-child(2){
		color: #f00;
	}
	button{
		color: white;
		background-color: coral;
		border: none;
		padding: 5px;
	}
</style>
